
<%@ page import="ar.com.photo_admin.domain.Event"%>
<!doctype html>
<html>
<head>
	<meta name="layout" content="main">
	<g:set var="entityName" value="${message(code: 'event.label', default: 'Event')}" />
	<title><g:message code="default.show.label" args="[entityName]" /></title>

	<!-- Bootstrap CSS Toolkit styles -->
	<link rel="stylesheet" href="${resource(dir:'css',file:'bootstrap.min.css')}" type="text/css" />
	
	<!-- Bootstrap Image Gallery styles -->
	<link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css">
	
</head>
<body>

	<div class="container">
										
		<g:if test="${flash.message}">
			<div class="alert alert-success">  
			  <a class="close" data-dismiss="alert">×</a>  
			  <div class="message" role="status">${flash.message}</div>  
			</div>  
			
		</g:if>
		
		<g:hasErrors bean="${eventInstance}">
		<ul class="errors" role="alert">
			<g:eachError bean="${eventInstance}" var="error">
			<li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
			</g:eachError>
		</ul>
		</g:hasErrors>	
		
		<div id="albumHeader" class="row">				 
			 	
		 	<div id="thumbnailContainer" class=" coverPhotoContainer span4">
		 		<g:if test="${eventInstance.coverPhoto}"> 
		 			<img id="coverPhotoImage" src="${eventInstance?.coverPhoto?.url}" class="coverPhoto thumbnail" name="${eventInstance?.coverPhoto?.id}"></img>
				</g:if>				 							
				<g:else>
					<img id="coverPhotoImage" src="/PhotoAdminGrailsApp/images/defaultImage.jpg" class="coverPhoto thumbnail" name="0"></img>
				</g:else>	
			</div>
			
			<div class="span8">					
					<div class="header_02">							
						${eventInstance?.name}
					</div>
					
					<div class="header_04 fr">							
						<g:formatDate format="dd-MM-yyyy" date="${eventInstance?.eventDate}"/>
					</div>
					
					<div class="descriptionShow">							
						${eventInstance?.description}
					</div>																												
			</div>					
		</div>	
		
		<g:form class="event_buttons">
			<fieldset class="buttons">
				<g:hiddenField name="id" value="${eventInstance?.id}" />
				
				<g:link class="btn btn-large btn-success" 
					action="edit"
					params='[eventId:"${eventInstance?.id}"]'>
					<g:message code="event.photoUploader.uploadPhotos"
						default="Editar" />
				</g:link>														
				
				<g:link class="btn btn-large btn-success" controller="eventAlbum"
					action="create"
					params='[event_id:"${eventInstance?.id}"]'>
					Nuevo album
				</g:link>					
				
			</fieldset>
		</g:form>
		
		
		<div class="albumsContainer">
						
			<div class="row">
				<g:if test="${eventInstance?.albums}">
					<g:each in="${eventInstance.albums}"
						var="a">
						<div id="albumContainer${a?.id}" class="gridMediumImageContainer span3">																																			
							<g:link
								controller="eventAlbum" action="show" id="${a.id}">
								<g:if test="${a.coverPhoto}"> 
						 			<img  src="${a?.coverPhoto?.thumbnailMediumUrl}" class="gridMediumImage" ></img>
								</g:if>				 							
								<g:else>
									<img src="/PhotoAdminGrailsApp/images/defaultImage.jpg" class="gridMediumImage"></img>
								</g:else>																											
							</g:link>
							<div class="gridMediumImageBottom">
								<div class="gridMediumImageBottomImageName">
									${a?.name}
								</div>
								 <g:img class="gridMediumImageBottomButton"  id="album${a?.id}" data-toggle="modal" data-target="#myModal" dir="images" file="DeleteRed_s.png" />
							</div>
						</div>	
					</g:each>
				</g:if>
			</div>
		</div>				
		
	</div>	        
     
   
    <div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <!-- <div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		    <h3 id="myModalLabel">Modal header</h3>
    	</div> -->
	    <div class="modal-body">
	    	<p>¿Esta seguro que desea borrar el album?</p>
	    </div>
	    <div class="modal-footer">
		    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
		    <button  class="btn btn-danger" onclick="showEventController.deleteAlbum(postingUrl,eventId,albumElement);" data-dismiss="modal" >Borrar</button>
	    </div>
    </div>	
	
	<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>	
	
	<g:javascript src="controller/ShowEventController.js" />
	
	<script type="text/javascript">	
       
	jQuery(document).ready(function(){
		
		albumElement = null;
		postingUrl = "${createLink(controller: 'event', action: 'deleteAlbum')}";
		eventId = "${eventInstance.id}";
		
		showEventController = new ShowEventController();					

	    jQuery('.gridMediumImageBottomButton').click(function () {		    
			albumElement = jQuery(this).prop("id");																	
	    });
		
	});
	
    </script>	
</body>
</html>
